body {
    user-select: none;
}

.toucha-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    overflow: hidden;
    background: #FFF2DF;
    opacity: 0.9;
}

.toucha-title {
    font-size: 40px;
    padding: 10px;
}

.toucha-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    padding: 5px;
    overflow: hidden;
    background: #FFF2DF;
    opacity: 0.9;
}

.toucha-page-container {
    position: absolute;
    top: 100px;
    height: calc(100% - 150px);
    left: 10px;
    width: calc(100% - 20px);
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.toucha-app-icon {
    width: 200px;
    height: 200px;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}

.toucha-app-icon img {
    width: 100px;
    height: 100px;
}

.eye {
    position: relative;
    border-radius: 50%;
    border: 10px solid #845A33;
    background: #FFB61E;
    overflow: hidden;
}
.eye .eyelid-top, .eye .eyelid-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    background: #845A33;
    animation-duration: 20s;
    animation-timing-function: ease-in;
    animation-delay: 3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
.eye .eyelid-top {
    top: -70%;
    height: 64%;
    border-bottom: 2px solid #845A33;
    border-radius: 50% 50% 0 0;
    animation-name: eyelid-blink-top;
}
.eye .eyelid-bottom {
    bottom: -40%;
    height: 36%;
    border-top: 2px solid #845A33;
    border-radius: 0 0 50% 50%;
    animation-name: eyelid-blink-bottom;
}
@keyframes eyelid-blink-top    {0% {top:    -70%;} 1% {top:    0;} 2% {top:    -70%;} 100% {top:    -70%;}}
@keyframes eyelid-blink-bottom {0% {bottom: -40%;} 1% {bottom: 0;} 2% {bottom: -40%;} 100% {bottom: -40%;}}